<template>
  <div
    class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-sm flex flex-col items-center hover:shadow-md transition-shadow duration-300 h-full"
  >
    <div class="text-center">
      <img
        class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-white shadow hover:shadow-md transition-all duration-300"
        alt="博主头像"
        src="../../assets/LLYC.png"
      />
      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
        LYC
      </h3>
    </div>
    <div class="mt-2 space-y-1 text-xs cursor-pointer w-full">
      <div
        class="flex items-center text-gray-600 dark:text-gray-100 p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4 mr-1 transition-transform duration-300 group-hover:scale-110 text-primary-dark dark:text-primary-light"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
          />
        </svg>
        <p>3288566340@qq.com</p>
      </div>
      <div
        class="flex items-center text-gray-600 dark:text-gray-100 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4 mr-1 transition-transform duration-300 group-hover:scale-110 text-primary-dark dark:text-primary-light"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
          />
        </svg>
        <p>
          <a
            class="hover:text-primary-dark hover:underline"
            href="https://gitee.com/belovedLYC"
            target="_blank"
          >
            Gitee
          </a>
        </p>
      </div>
      <div
        class="flex items-center text-gray-600 dark:text-gray-100 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4 mr-1 transition-transform duration-300 group-hover:scale-110 text-primary-dark dark:text-primary-light"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
          />
        </svg>
        <p>
          公开
          <span class="font-medium text-primary-dark dark:text-primary-light"
            >10</span
          >
          个项目仓库
        </p>
      </div>
      <div
        class="flex items-center text-gray-600 dark:text-gray-100 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4 mr-1 transition-transform duration-300 group-hover:scale-110 text-primary-dark dark:text-primary-light"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
          />
        </svg>
        <p>
          <a
            href="https://www.yuque.com/beloved-x5krn"
            target="_blank"
            class="hover:text-primary-dark hover:underline"
          >
            语雀笔记
          </a>
        </p>
      </div>
    </div>

    <div class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 w-full">
      <h4 class="text-xs font-semibold dark:text-gray-100 text-gray-800 mb-1.5">
        技术栈
      </h4>
      <div class="flex flex-wrap gap-1">
        <span
          v-for="technology in TechnologyStack"
          class="px-1.5 py-0.5 cursor-pointer bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 text-xs rounded hover:bg-green-200 dark:hover:bg-green-700 transition-colors hover:shadow-sm"
        >
          <a :href="technology.path" target="_blank">
            {{ technology.name }}
          </a>
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ref } from 'vue'
const blogAuthorProfile = ref('')

const TechnologyStack = [
  {
    name: 'HTML',
    path: 'https://developer.mozilla.org/en-US/docs/Web/HTML'
  },
  {
    name: 'CSS',
    path: 'https://developer.mozilla.org/en-US/docs/Web/CSS'
  },
  {
    name: 'JavaScript',
    path: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript'
  },
  {
    name: 'Vue',
    path: 'https://vuejs.org/'
  },
  {
    name: 'React',
    path: 'https://reactjs.org/'
  }
]
</script>

<style scoped>
.rounded-full {
  transition: transform 0.3s ease;
}

.rounded-full:hover {
  transform: scale(1.05);
}

a {
  transition: color 0.2s ease;
}

.group:hover svg {
  transform: scale(1.1);
}
</style>
